<script setup name="home">
import { toRefs } from 'vue'
import { homePersonalized } from '@/hookes/useHome'
import Header from './components/Header.vue'
import Banner from './components/Banner.vue'
import MusicList from './components/MusicList.vue'
import DiscoverList from './components/DiscoverList.vue'
import NewAlbum from './components/NewAlbum.vue'
import MvList from './components/MvList.vue'
import SingerList from './components/SingerList.vue'


const { banner_info, playlist_info, album_info, mv_info, hot_singer } = homePersonalized()

const { banner_list, banner_loading } = toRefs(banner_info)
const { playlist_list, playlist_count, playlist_loading } = toRefs(playlist_info)
const { album_list, album_count, album_loading } = toRefs(album_info)
const { mv_list, mv_count, mv_loading } = toRefs(mv_info)
const { singer_list, singer_loading } = toRefs(hot_singer)
</script>

<template>
  <div class="home-page">
    <Header />
    <Banner :bannerlist="banner_list" :loading="banner_loading" />
    <MusicList />
    <DiscoverList :playList="playlist_list" :count="playlist_count" :loading="playlist_loading" />
    <NewAlbum :albumlist="album_list" :count="album_count" :loading="album_loading" />
    <MvList :mvlist="mv_list" :count="mv_count" :loading="mv_loading" />
    <SingerList :singerlist="singer_list" :loading="singer_loading" />
  </div>
</template>

<style scoped lang="scss">
.home-page {
  overflow: auto;
  padding-bottom: 90px;
  padding: 50px 0 90px 0;

  :deep(.header) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}
</style>
